<template>  
<div class="login-container">

  <div class="register-form">  
    <h2>注册</h2>  
    <form @submit.prevent="submitForm">  
      <div>  
        <label for="username">用户名:</label>  
        <input type="text" id="username" v-model="registForm.username" required>  
      </div>  
      <div>  
        <label for="email">邮箱:</label>  
        <input type="email" id="email" v-model="registForm.email" required>  
      </div>  
      <div>  
        <label for="password">密码:</label>  
        <input type="password" id="password" v-model="registForm.password" required>  
      </div>  
         
      <button type="submit">提交</button>  
      <br>
      <button @click="goToLogin">已有账号？登录</button>  
    </form>  
    
     
  </div>  
</div>
</template>  
  
<script>  
import { regist } from '@/api/user'
export default { 
 
data() {  
    return {  
      registForm: {
        username: '',
        password: '',
        email: '',
      },
       
      
    };  
  },   
  methods: {  
  
    submitForm() {  
     
        
         
          
          //调用登录后端接口
          regist(this.registForm).then((result) => {
           
            if (result.data.code == 1) {
              
              this.$message.success("恭喜你，注册成功");
              this.$router.push('/login');
            } else {
              
            }
          });
        
      
    },
  goToLogin() {  
      // 跳转到登录界面，可以通过Vue Router进行页面跳转  
      // 这里假设你的登录界面路由为'/login'  
      this.$router.push('/login');  
    },

  }  
};  
</script>  
  
<style>  
.login-container {
  background-image: url('../../assets/background.jpg');
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.register-form {  
  max-width: 400px;  
  margin: 0 auto;  
  padding: 20px;  
}  
.register-form h2 {  
  text-align: center;  
}  
.register-form label {  
  display: block;  
  margin-bottom: 10px;  
}  
.register-form input[type="text"],  
.register-form input[type="email"],  
.register-form input[type="password"] {  
  width: 100%;  
  padding: 8px;  
  border: 1px solid #ccc;  
  border-radius: 4px;  
}  
.register-form button {  
  display: block;  
  width: 100%;  
  padding: 10px;  
  background-color: #4CAF50;  
  color: #fff;  
  border: none;  
  border-radius: 4px;  
  cursor: pointer;  
}  
</style>